import React, { Component } from "react";

//引入TabBar
import { TabBar } from "antd-mobile";

// 引入iconfont css
import "../../assets/fonts/iconfont.css";
//导入css
import "./index.css";
// 路由
import { HashRouter as Router, Route, Link } from "react-router-dom";
//导入组件
import Index from "../Index";
import HouseList from "../HouseList";
import News from "../News";
import ProFile from "../ProFile";
//导航分类的数据
const tabBars = [
  { path: "/home", title: "首页", icon: "icon-ind" },
  { path: "/home/houselist", title: "找房", icon: "icon-findHouse" },
  { path: "/home/news", title: "资讯", icon: "icon-infom" },
  { path: "/home/profile", title: "我的", icon: "icon-my" },
];
// 定义类组件
export default class Home extends Component {
  //底部导航栏的函数

  render() {
    return (
      <div className="home">
        {/* 路由 */}
        <Router>
          {/* 根据路由显示组件 渲染页面 */}
          <Route path="/home" exact component={Index} />
          <Route path="/home/news" component={News} />
          <Route path="/home/houselist" component={HouseList} />
          <Route path="/home/profile" component={ProFile} />

          <div>
            <TabBar
              unselectedTintColor="#949494"
              tintColor="#21b97a"
              barTintColor="white"
              noRenderContent
            >
              {/* 根据 导航的类型遍历 获取导航*/}
              {tabBars.map((item, index) => (
                <TabBar.Item
                  title={item.title}
                  key={item.path}
                  icon={<i className={`iconfont ${item.icon}`}></i>}
                  selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
                  selected={this.props.location.pathname === item.path}
                  onPress={() => {
                    //点击导航栏分类触发的函数 跳转到指定页面
                    this.props.history.push(item.path);
                  }}
                />
              ))}
            </TabBar>
          </div>
        </Router>
      </div>
    );
  }
}
